<template>
    <div>
        <h2>门店修改</h2>
        <table class="table table-bordered">
            <tbody>

                <tr>
                    <td align="right">门店名称</td>
                    <td><input type="text" v-model="info.ShopName"/></td>
                </tr>

                <tr>
                    <td align="right">分店名称</td>
                    <td><input type="text" v-model="info.BrancName"/></td>
                </tr>

                <tr>
                    <td align="right">门店地址</td>
                    <td><input type="text" v-model="info.Address"/></td>
                </tr>

                <tr>
                    <td align="right">门店图片</td>
                    <td><input type="file" @change="img"/>
                        <img :src="info.Photo" width="100" height="100" v-if="info.Photo != ''"/>
                    </td>
                </tr>

                <tr>
                    <td align="right">客服电话</td>
                    <td><input type="text" v-model="info.Phone" maxlength="11"/></td>
                </tr>

                <tr>
                    <td align="right">门店状态</td>
                    <td>
                        <input type="radio" name="state" v-model="info.State" :value="1">启用
                        <input type="radio" name="state" v-model="info.State" :value="0">禁用
                    </td>
                </tr>

                <tr>
                    <td align="right">门店介绍</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="info.Desc"></textarea>
                    </td>
                </tr>

                <tr>
                    <td align="right">入住须知</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="info.Notice"></textarea>
                    </td>
                </tr>

                <tr>
                    <td align="right">交通信息</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="info.Traffic"></textarea>
                    </td>
                </tr>

                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" value="取消"/>

                        <input type="button" value="修改" class="btn btn-primary" @click="ok"/>
                    </td>
                </tr>


            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
import {useRouter,useRoute} from 'vue-router';
import { isBindingName } from 'typescript';

const router = useRouter(); //页面跳转
const route = useRoute();  //接收参数

let info: any = reactive({
  Id:route.query.id,
  ShopName:'',
  BrancName: '',
  Address: '',
  Photo: '',
  Phone: '',
  State: 1,
  Desc: '',
  Notice: '',
  Traffic: '',
});


onMounted(()=>{
    getData();
})

//图片上传
const img = (e:any)=>{
    console.log(e);
    //获取上传的图片
    let obj = e.target.files[0];
    //将上传的图片转成fromData格式
    let f = new FormData();
    f.append('file',obj);

    //发送网络请求实现图片上传
    axios({
        url:'https://localhost:7176/api/img/Imgs',
        method:'post',
        data:f
    })
    .then((res)=>{
        if(res.data == '请正确上传图片')
        {
            alert("请正确上传图片");
            return;
        }
        if(res.data == '图片不能大于2M')
        {
            alert("上传图片不能大于2M");
            return;
        }
        info.Photo = res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
};

//门店增加
const ok = ()=>{
    if(info.ShopName == "")
    {
        alert("门店名称不能为空");
        return;
    }
    if(info.BrancName == "")
    {
        alert("分店名称不能为空")
        return;
    }
    if(info.Photo == "")
    {
        alert("图片不能为空")
        return;
    }
    if(info.Phone == "")
    {
        alert("手机号不能为空")
        return;
    }
    let reg  = /^1[3-9]\d{9}$/;
    if(reg.test(info.Phone) == false)
    {
        alert("手机号格式不正确")
        return;
    }
    if(info.Notice == "")
    {
        alert("入住须知不能为空")
        return;
    }
    
    axios({
        url:'https://localhost:7176/api/Shop/UpdateShop',
        method:'post',
        data:info
    })
    .then((res)=>{
        if(res.data > 0)
        {
            alert("修改成功");
           router.push('/demoView');
        }
        else
        {
            alert("修改失败")
            return;
        }
    })
    .catch((err)=>{
        console.log(err);
    })

}


//实现数据反填
const getData = () =>{
    axios({
        url:'https://localhost:7176/api/Shop/GetShop',
        method:'post',
        params:{id:route.query.id},  //路由接收参数
    })
    .then((res)=>{
        Object.assign(info,res.data);
    })
    .catch((err)=>{
        console.log(err);
    })
}

</script>

<style scoped>

</style>